<template>
  <div class="about">
    <my-header>
      <template #left>
          <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
      <template #center>
          {{city.name}}
      </template>
      <template #right>
         切换城市
      </template>
    </my-header>
    <my-input @submit="search" v-model="inputVal"></my-input>
    <my-list v-if="list.length" :childrenList="list"></my-list>
    <div v-else class="history">
      <p>搜索历史</p>
      <ul>
        <li v-for="(item,index) in historyList" :key="index" @click="$router.push(`/home/index?geohash=${item.geohash}`)">
           <h4>{{item.name}}</h4>
           <p>{{item.address}}</p>
        </li>
        <li @click="$store.commit('delect')" style="text-align:center">清空所有</li>
      </ul>
    </div>
  </div>
</template>
<script>
import myHeader from '../components/myHeader.vue'
import MyInput from '../components/myInput.vue'
import api from '../api/index'
import { reactive, toRefs, computed } from 'vue';
import MyList from '../components/myList.vue';
import { useStore } from 'vuex';
export default {
  components: { myHeader, MyInput, MyList },
  setup(){
    const { state } = useStore();
    const data = reactive({
      inputVal: '', // 输入框的值
      city:{}, // 城市信息
      list:[], // 附近商圈
      historyList: computed(() => state.history)
    })
     api.get('/v1/cities/32').then(res => {
       data.city = res;
     })
     
    const search = () => { // 搜索
      api.get(`/v1/pois?type=search&city_id=32&keyword=${data.inputVal}`).then(res => {
       data.list = res;
     })
    }
    return{
      search,
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .about{
    height: 100%;
    background: #e9e9e9;
    li{
        padding: 10px;
        border-bottom: 1px solid #e9e9e9;
        background: #fff;
        p{
          font-size: 12px;
          color: #ccc;
        }
    }
  }
</style>
